<template>
	<div class="imageloader-container">
		<img v-if="!allOk" class="placeholder" :src="placeholder" />
		<img
			:src="src"
			:style="{
				opacity: orgOpcity,
				transition: `${duration}ms`,
			}"
			@load="loaded"
		/>
	</div>
</template>

<script>
export default {
	props: {
		src: {
			type: String,
			required: true,
		},
		placeholder: {
			type: String,
			required: true,
		},
		duration: {
			type: Number,
			default: 500,
		},
	},
	data() {
		return {
			orgOpcity: 0, //原始图片透明度
			allOk: false, //图片加载完毕移出占位图片
		};
	},
	methods: {
		loaded() {
			this.orgOpcity = 1;
			setTimeout(() => {
				this.allOk = true;
				this.$emit("loaded");
			}, this.duration);
		},
	},
};
</script>

<style scoped lang="less">
@import "~@/styles/mixin.less";

.imageloader-container {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

img {
	.self-fill();
	object-fit: cover;
}

.placeholder {
	//根据视口大小变化模糊程度
	filter: blur(2vw);
}
</style>
